import React from 'react';
import Singerchild from './singerchild'
import Axios from 'axios';
import { Pagination} from 'element-react';
import Singerword from './singerword';
import Singerpic from './singerpic'
import $ from 'jquery';

class Singer extends React.Component{
    constructor(props){
        super(props);
        this.state={
            res:'',
            type:'全部',
            name:'热门',
            page:1,
        }
    }
    componentWillMount(){
		var that =this;
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getsinger',
            data:{type:'全部',name:'热门',page:1},
			dataType:'json'
		}).then(function(res){
			that.setState({
				res:res.data,
			})
		})	
	}
	onCurrentChange(currentPage){
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getsinger',
            data:{page:currentPage,type:this.state.type,name:this.state.name},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data,
                page:currentPage
            })
        })
    }
    Cktype(e){
        var type = e.target.getAttribute('title');
        this.setState({
            type:type,
        })
        Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getsinger',
            data:{page:1,type:type,name:this.state.name},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data,
            })
        })
    }
    Ckname(e){
        var name = e.target.getAttribute('title');
        this.setState({
            name:name,
        })
        Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getsinger',
            data:{page:1,type:this.state.type,name:name},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data,
            })
        })
    }
    render(){
        var _res = this.state.res.rows;
        var html=[];
        if(_res){
            for(var i=0;i<_res.length;i++){
                html.push(
                    <Singerword key={i} {..._res[i]}/>
                )
            }
        }
        var _pic = this.state.res.pic;
        var _html=[];
        if(_pic){
            for(var j=0;j<_pic.length;j++){
                _html.push(
                    <Singerpic key={j} {..._pic[j]}/>
                )
            }
        }
        console.log(this.state.res.total);
        return(
            <div>
            <div className="mod_singer_push js_my_singers_nologin mod_singer_push--nofocus">
                <div className="section_inner">
                    <h2 className="singer_push__tit" id="ggg">
                        
                    </h2>
                    <div className="singer_push__desc">
                        
                    </div>
                </div>
            </div>
            <div className="main">
                <div className="mod_singer_tag">
                    <div className="singer_tag__list js_area">
                        <a href="##" className="singer_tag__item singer_tag__item--all singer_tag__item--select ybty" onClick={this.Cktype.bind(this) } title='全部'>全部</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="cn_man" onClick={this.Cktype.bind(this)} title='华语男'>华语男</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="cn_woman" onClick={this.Cktype.bind(this)} title='华语女'>华语女</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="cn_team" onClick={this.Cktype.bind(this)}  title='华语组合'>华语组合</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="k_man" onClick={this.Cktype.bind(this)} title='韩国男'>韩国男</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="k_woman" onClick={this.Cktype.bind(this)} title='韩国女'>韩国女</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="k_team" onClick={this.Cktype.bind(this)} title='韩国组合'>韩国组合</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="j_man" onClick={this.Cktype.bind(this)} title='日本男'>日本男</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="j_woman" onClick={this.Cktype.bind(this)} title='日本女'>日本女</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="j_team" onClick={this.Cktype.bind(this)} title='日本组合'>日本组合</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="eu_man" onClick={this.Cktype.bind(this)} title='欧美男'>欧美男</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="eu_woman" onClick={this.Cktype.bind(this)} title='欧美女'>欧美女</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="eu_team" onClick={this.Cktype.bind(this)} title='欧美组合'>欧美组合</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="c_orchestra" onClick={this.Cktype.bind(this)} title='乐团'>乐团</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="c_performer" onClick={this.Cktype.bind(this)} title='演奏家'>演奏家</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="c_composer" onClick={this.Cktype.bind(this)} title='作曲家'>作曲家</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="c_cantor" onClick={this.Cktype.bind(this)} title='指挥家'>指挥家</a>
                        <a href="javascript:;" className="singer_tag__item ybty" data-key="other_other" onClick={this.Cktype.bind(this)} title='其他'>其他</a>
                    </div>
                    <div className="singer_tag__list js_letter">
                        <a href="javascript:;" className="singer_tag__item ybna singer_tag__item--all singer_tag__item--select" onClick={this.Ckname.bind(this)} title='热门'>热门</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="A" onClick={this.Ckname.bind(this)} title='A'>A</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="B" onClick={this.Ckname.bind(this)} title='B'>B</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="C" onClick={this.Ckname.bind(this)} title='C'>C</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="D" onClick={this.Ckname.bind(this)} title='D'>D</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="E" onClick={this.Ckname.bind(this)} title='E'>E</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="F" onClick={this.Ckname.bind(this)} title='F'>F</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="G" onClick={this.Ckname.bind(this)} title='G'>G</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="H" onClick={this.Ckname.bind(this)} title='H'>H</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="I" onClick={this.Ckname.bind(this)} title='I'>I</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="J" onClick={this.Ckname.bind(this)} title='J'>J</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="K" onClick={this.Ckname.bind(this)} title='K'>K</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="L" onClick={this.Ckname.bind(this)} title='L'>L</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="M" onClick={this.Ckname.bind(this)} title='M'>M</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="N" onClick={this.Ckname.bind(this)} title='N'>N</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="O" onClick={this.Ckname.bind(this)} title='O'>O</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="P" onClick={this.Ckname.bind(this)} title='P'>P</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="Q" onClick={this.Ckname.bind(this)} title='Q'>Q</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="R" onClick={this.Ckname.bind(this)} title='R'>R</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="S" onClick={this.Ckname.bind(this)} title='S'>S</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="T" onClick={this.Ckname.bind(this)} title='T'>T</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="U" onClick={this.Ckname.bind(this)} title='U'>U</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="V" onClick={this.Ckname.bind(this)} title='V'>V</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="W" onClick={this.Ckname.bind(this)} title='W'>W</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="X" onClick={this.Ckname.bind(this)} title='X'>X</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="Y" onClick={this.Ckname.bind(this)} title='Y'>Y</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="Z" onClick={this.Ckname.bind(this)} title='Z'>Z</a>
                        <a href="javascript:;" className="singer_tag__item ybna" data-key="9" onClick={this.Ckname.bind(this)} title='#'>#</a>
                    </div>

                </div>
                <div id="mod-singerlist">
                    <div className="mod_singer_list">
                        <ul className="singer_list__list js_avtar_list">
                            {this.state.page>1?'':_html}
                        </ul>
                    </div>
                    <ul className="singer_list_txt">
                        {html}
                    </ul>
                    <Pagination layout="prev, pager, next" total={this.state.res.total} pageSize={90} onCurrentChange={this.onCurrentChange.bind(this)}/>
                </div>
            </div>
            </div>
        )
    }
    componentDidMount(){
        $('.ybty').on('click',function(){
            $(this).addClass('singer_tag__item--select').siblings('.ybty').removeClass('singer_tag__item--select')
        })
         $('.ybna').on('click',function(){
            $(this).addClass('singer_tag__item--select').siblings('.ybna').removeClass('singer_tag__item--select')
        })
    }
}



export default Singer;